<template>
  <div>
    <h1 ref="myH1">1. ref获取原生dom</h1>
    <button @click="fn">点击修改上面内容</button>

    <hr />
    <h1>2. 点击demo组件里最后一个高亮</h1>
    <button @click="fn2">点击</button>
    <Demo ref="de"></Demo>

    <hr />
    <h1>3. $nextTick使用</h1>
    <Tick></Tick>

    <hr>
    <h1>4. $nextTick场景</h1>
    <Search></Search>

    <hr>
    <h1>5. 组件name属性注册组件名字</h1>
    <ComNameHaHa></ComNameHaHa>
  </div>
</template>

<script>
import Demo from "./components/Demo";
import Tick from "./components/Tick";
import Search from './components/Search';
import ComName from './components/ComName';

export default {
  components: {
    Demo,
    Tick,
    Search,
    [ComName.name]: ComName // key是变量,必须用[]包起来
  },
  methods: {
    fn() {
      console.log(this.$refs.myH1); // <h1></h1> 原生DOM标签
      this.$refs.myH1.innerHTML = "改内容了";
    },
    fn2() {
      this.$refs.de.changeIndex(2);
    },
  },
};
</script>

<style>
</style>